<template>
	<view class="page">
		<view class="item">
			<view class="top">
				<view class="txt">
					企业名称
				</view>
				<view class="I">
					*
				</view>
			</view>

			<view class="bottom">
				<view class="centent">
					<input v-model="form.companyName" placeholder="请输入企业名称" />
				</view>
			</view>
		</view>
		<view class="item">
			<view class="top">
				<view class="txt">
					省市区
				</view>
				<view class="I">
					*
				</view>
			</view>
			<view class="bottom">
				<view class="centent">
					<input v-model="areaListStr" placeholder="选择省市区" :disabled="true" @click="chooseArea" />
					<u-picker mode="multiSelector" v-model="show" :defaultSelector="defaultSelector" range-key="name"
						:range="areaList" @columnchange="changeArea" @confirm="confirmArea"></u-picker>
				</view>
			</view>
		</view>

		<view class="item">
			<view class="top">
				<view class="txt">
					企业所在地
				</view>

			</view>
			<view class="bottom">
				<view class="centent">
					<input v-model="form.companyAddress" placeholder="请输入企业地址" />
				</view>
			</view>
		</view>

		<view class="item">
			<view class="top">
				<view class="txt">
					统一社会信用代码
				</view>

			</view>
			<view class="bottom">
				<view class="centent">
					<input v-model="form.creditCode" placeholder="请输入统一社会信用代码" />
				</view>
			</view>
		</view>

		<view class="item">
			<view class="top">
				<view class="txt">
					法人姓名
				</view>

			</view>
			<view class="bottom">
				<view class="centent">
					<input v-model="form.companyPerson" placeholder="请输入名称" />
				</view>
			</view>
		</view>
		<view class="item">
			<view class="top">
				<view class="txt">
					法人电话
				</view>

			</view>
			<view class="bottom">
				<view class="centent">
					<input v-model="form.companyMobile" placeholder="请输入联系电话" />
				</view>
			</view>
		</view>

		<view class="item">
			<view class="top">
				<view class="txt">
					身份证正面
				</view>

			</view>
			<view class="bottom">
				<view class="centent" style="margin-left: -10rpx;">
					<u-upload :action="action" ref="card" :width="135" :height="135" :max-count="1"></u-upload>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="top">
				<view class="txt">
					身份证反面
				</view>

			</view>
			<view class="bottom">
				<view class="centent" style="margin-left: -10rpx;">
					<u-upload :action="action" ref="cardReverse" :width="135" :height="135" :max-count="1"></u-upload>
				</view>
			</view>
		</view>

		<view class="item">
			<view class="top">
				<view class="txt">
					用户户号
				</view>

			</view>
			<view class="bottom">
				<view class="centent">
					<input v-model="form.houseNum" placeholder="请输入户号" />
				</view>
			</view>
		</view>

		<view class="item">
			<view class="top">
				<view class="txt">
					预估电量
				</view>

			</view>
			<view class="bottom">
				<view class="centent">
					<input v-model="form.electricityNum" placeholder="请输入电量(单位:万千瓦时)" />
				</view>
			</view>
		</view>



		<view class="item">
			<view class="top">
				<view class="txt">
					电压等级
				</view>

			</view>
			<view class="bottom">
				<view class="centent">
					<input v-model="form.voltageNum" placeholder="请输入电压等级" />
				</view>
			</view>
		</view>


		<view class="radioItem" v-if="id == 0">
			<view class="top" style="margin-top: 10rpx;">
				<view class="txt">
					跟进状态
				</view>
				<view class="I">
					*
				</view>
			</view>
			<view class="bottom" style="display: flex;flex-direction: column;align-items: flex-start;">
				<view class="centent">
					<u-radio-group v-model="form.flowStatus" wrap="true">
						<u-radio v-for="(item, index) in Lst" :key="index" :name="index" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>


		<view class="item">
			<view class="top">
				<view class="txt">
					营业执照
				</view>

			</view>
			<view class="bottom">
				<view class="centent" style="margin-left: -10rpx;">
					<u-upload :action="action" ref="uUpload" :width="135" :height="135" :max-count="1"></u-upload>
				</view>
			</view>
		</view>

		<view class="item">
			<view class="top">
				<view class="txt">
					核查联（电费单）
				</view>

			</view>
			<view class="bottom">
				<view class="centent" style="margin-left: -10rpx;">
					<u-upload :action="action" ref="uUpload1" :width="135" :height="135" :max-count="1"></u-upload>
				</view>
			</view>
		</view>

		<view class="item">
			<view class="top">
				<view class="txt">
					其它附件
				</view>

			</view>
			<view class="bottom">
				<view class="centent" style="margin-left: -10rpx;">
					<u-upload :action="action" ref="other" :width="135" :height="135" :max-count="10"></u-upload>
				</view>
			</view>
		</view>
		<view class="belItem" v-if="id == 0">
			<view class="top" style="margin-top: 10rpx;">
				<view class="txt">
					备&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp注
				</view>

			</view>
			<view class="bottom">
				<view class="centent">
					<textarea v-model="form.remark" placeholder="请输入备注" class="put"></textarea>
				</view>
			</view>
		</view>
				<view class="checkBox">
					<!--  -->
					<u-checkbox-group>
						<u-checkbox v-model="chktVal" size="28" label-size="26" style="margin-right: 1rpx;">请阅读</u-checkbox>
					</u-checkbox-group>
					<text style="color: #2E6ADF;" @click="$next(`/pages/commissionCenters/UserServiceAgreement`,true)">《用户服务协议》</text><text>和</text><text style="color: #2E6ADF;" @click="$next(`/pages/commissionCenters/PrivacyPolicy`,true)">《隐私政策》</text>并勾选协议
				</view>
		<view class="submitBox">
			<view class="submit" @click="submit">
				确认{{this.id ? "编辑" : "新增"}}
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: this.$axios.interfaceUrl() + "/upload",
				form: {
					id: "",
					remark: "",
					serviceMode: ""
				},
				chktVal:true,
				areaListStr: "",
				show: false,
				defaultSelector:[0,0,0,0],
				areaList: [
					[{
						id: 0,
						name: '请选择'
					}],
					[{
						id: 0,
						name: '请选择'
					}],
					[{
						id: 0,
						name: '请选择'
					}],
					[{
						id: 0,
						name: '请选择'
					}]
				],
				pid: 0,
				userinfo: {},
				Lst: [{
						name: 'A-已签约',
						disabled: false
					},
					{
						name: 'B-意向签约',
						disabled: false
					},
					{
						name: 'C-待跟进',
						disabled: false
					},
					{
						name: 'D-暂不考虑',
						disabled: false
					},
					{
						name: 'E-待线上联系',
						disabled: false
					},
					{
						name: 'F-待分配客户',
						disabled: false
					},
					{
						name: 'G-无效客户',
						disabled: false
					}
				]

			}
		},
		onLoad(options) {
			if (options.id) {
				this.form.id = options.id
				this.getCustomerDetail()
			}
			uni.setNavigationBarTitle({
				title: `${this.form.id?'编辑':'新建'}客户`
			})
			this.getAreaRes(0)
		},
		onShow() {
			this.userinfo = uni.getStorageSync("userinfo")
		},
		methods: {
			getAreaRes(idx) {
				this.$axios.request(this.$api.ShiListApi, "GET", {
					pid: this.pid
				}).then((val) => {
					val.data.unshift({
						id: 0,
						name: '请选择'
					})
					this.$set(this.areaList, idx, val.data)

				})
			},
			chooseArea() {
				this.show = true
			},
			changeArea(e) {
				this.$set(this.defaultSelector,e.column,e.index)
				if (e.column < 3) {
					this.pid = this.areaList[e.column][e.index].id
					this.getAreaRes(e.column + 1)
				}
			},
			confirmArea(e) {
				this.form.provinceId = this.areaList[0][e[0]].id
				this.form.cityId = this.areaList[1][e[1]].id
				this.form.districtId = this.areaList[2][e[2]].id
				this.form.townId = this.areaList[3][e[3]].id

				let arr = [this.areaList[0][e[0]].name, this.areaList[1][e[1]].name, this.areaList[2][e[2]].name, this
					.areaList[3][e[3]].name
				]
				this.areaListStr = arr.join(" / ")
			},
			submit() {
				if(this.form.provinceId == 0 || this.form.cityId == 0 || this.form.districtId == 0 || this.form.townId == 0){
					this.$msg.toast("请选择省市区镇")
					return
				}
				this.form.businessImage = this.getUploadPath(this.$refs.uUpload.lists)
				this.form.billImage = this.getUploadPath(this.$refs.uUpload1.lists)
				this.form.cardImage = this.getUploadPath(this.$refs.card.lists)
				this.form.cardReverseImage = this.getUploadPath(this.$refs.cardReverse.lists)
				this.form.otherImages = this.getUploadPath(this.$refs.other.lists)

				this.$axios.request(this.$api.saveCustom, "POST", this.form).then((val) => {
					uni.$emit('reloadData', val)
					this.$nextTick(() => {
						uni.navigateBack()
					})
				})
			},
			getUploadPath(data) {
				let arr = new Array()
				data.forEach((item, index) => {
					arr.push(item.response.data.src)
				})
				return arr.join(",")
			},
			getCustomerDetail() {
				this.$axios.request(`${this.$api.getCustom}/${this.form.id}`, "GET").then((val) => {
					this.form = val.data

					this.$refs.uUpload.lists.push({
						url: this.$utils.imagePath(val.data.businessImage),
						response: {
							data: {
								src: val.data.businessImage
							}
						}
					})

					this.$refs.uUpload1.lists.push({
						url: this.$utils.imagePath(val.data.billImage),
						response: {
							data: {
								src: val.data.billImage
							}
						}
					})

					this.$refs.card.lists.push({
						url: this.$utils.imagePath(val.data.cardImage),
						response: {
							data: {
								src: val.data.cardImage
							}
						}
					})
					this.$refs.cardReverse.lists.push({
						url: this.$utils.imagePath(val.data.cardReverseImage),
						response: {
							data: {
								src: val.data.cardReverseImage
							}
						}
					})
					this.$refs.other.lists.push({
						url: this.$utils.imagePath(val.data.otherImages),
						response: {
							data: {
								src: val.data.otherImages
							}
						}
					})
					return
				})
			}
		}
	}
</script>

<style>
	.page {
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		background-color: #f9f9f9;
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 750rpx;
		min-height: 100rpx;
		background-color: #FFFFFF;
		margin-top: 16rpx;
		overflow: hidden;
	}

	.bottom {
		width: 75%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 32rpx;
	}

	.top {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 32rpx;
	}

	.top {
		width: 370rpx;
	}

	.bottom {}

	.txt,
	.I {
		height: 40rpx;
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		line-height: 40rpx;
		color: #333333;
	}

	.I {
		color: #F35B47;
		margin-left: 10rpx;
		line-height: 54rpx;
	}

	.submitBox {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 96rpx;
		padding: 0 32rpx;
		background-color: #FFFFFF;
	}

	.submit {
		width: 686rpx;
		height: 64rpx;
		border-radius: 4rpx;
		background-color: #2E6ADF;
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 400;
		line-height: 64rpx;
		text-align: center;
		color: #FFFFFF;
	}

	.put {
		width: 646rpx;
		height: 240rpx;
		border: 1rpx solid #E1E1E1;
		margin: 12rpx auto 0;
		padding: 20rpx;
	}

	.radioItem,
	.belItem {
		width: 750rpx;
		background-color: #FFFFFF;
		overflow: hidden;
		margin-top: 16rpx;
	}

	.centent {
		width: 100%;
	}
		.checkBox {
			padding: 0 32rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 26rpx;
			font-family: "PingFang SC";
			font-weight: 400;
			color: #666;
		}
</style>